<template>
  <el-dialog :title=title
             v-if="open"
             :visible.sync="open"
             :modal= false
             width="80%"
             center
  >
  <div class="app-container">
    <el-tabs type="border-card" v-model="activeTab">
      <el-tab-pane  :key="1" label="订单信息" name="订单信息">
        <div style="font-size: 20px;">订单信息</div>
        <!--横线组件纯纯为了页面好看-->
        <el-divider></el-divider>
        <el-form ref="form" :model="form" :rules="rules" label-width="110px" :disabled="optType == 'view' || optType == 'confirm'">
          <el-row>
            <el-col :span="8">
              <el-form-item label="订单编号" prop="orderCode" >
                <el-input v-model="form.orderCode" placeholder="请输入订单编号" :readonly="optType != 'save'" />
              </el-form-item>
            </el-col>
            <el-col :span="4">

            </el-col>
            <el-col :span="12">
              <el-form-item label="订单名称" prop="orderName">
                <el-input v-model="form.orderName"  />
              </el-form-item>
            </el-col>
          </el-row>


          <el-row>
            <el-col :span="12">
              <el-form-item label="计划编码" prop="planNo">
                <el-input v-model="form.planNo" placeholder="请选择外协计划" readonly>

                </el-input>

              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="计划名称" :disabled="true" prop="planName">
                <el-input v-model="form.planName" :disabled="true"  />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="需求截至日期" prop="deadline"  >
                <el-input v-model="form.deadline" :disabled="true"  />

              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="付款方式" prop="paymentType">
                <el-select v-model="form.paymentType" placeholder="请选择付款类型" clearable>
                  <el-option
                    v-for="dict in dict.type.erp_payment_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="parseInt(dict.value)" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="生产商编码" prop="manufactureCode">
                <el-input v-model="form.manufactureCode"  readonly>

                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="生产商名称" :disabled="true" prop="manufactureName">
                <el-input v-model="form.manufactureName" :disabled="true"  />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="联系人" prop="contact">
                <el-input v-model="form.contact":disabled="true" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系人电话" prop="contactTel">
                <el-input v-model="form.contactTel":disabled="true" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="成本" prop="estimatedCost">
                <el-input v-model="form.estimatedCost":disabled="true" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="外协合同" prop="drawUrl">
                <FileUpload
                  :limit="1"
                  :fileSize="100"
                  :fileType="fileType"
                  :value="pictureList"
                  :optType="optType"
                  v-if="optType == 'edit'||optType=='save'"
                >
                </FileUpload>
                <li :key="form.drawUrl" v-if="optType != 'edit'&&optType!='save'&&form.drawUrl!=null&&form.drawUrl!=''" class="el-upload-list__item ele-upload-list__item-content" >
                  <el-link :href="`${form.drawUrl}`" v-if="form.drawUrl!=null" :underline="false" target="_blank">
                    <span class="el-icon-document"> {{ getFileName(form.drawUrl) }} </span>
                  </el-link>
                </li>
                <el-input v-model="form.drawUrl" v-show="false" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
        <plan-line ref="planLine" :plan-line-list="planLineList" :edit-status="planLineOptType" :show-plan-line="false" ></plan-line>
        <el-divider  content-position="center">订单产品信息</el-divider>
        <el-card shadow="always"  class="box-card">
          <OrderLine ref="orderLine" :optType="optType" :order-line="orderLine" :order="form" ></OrderLine>
        </el-card>
      </el-tab-pane>
      <el-tab-pane  :key="2" label="审批流程">
        <el-timeline id="approveTimeLine">
          <el-timeline-item
            v-for="item in approveFlow"
            :key="item.businessCode"
            :timestamp="item.createTimeLog"
            placement="top"
            :icon="item.stepNickNameLog?'el-icon-success':''"
            :color="item.stepNickNameLog?'#13ce66':''"
          >
            <el-card>
              <h3>{{ item.stepNickNameLog }} <b>{{item.stepName}}</b><span style=" font-weight:800;" :style="{ color: item.statusLog >= 1 ? 'green' : (item.statusLog == 0 ? '' : 'red') }">
    {{item.statusLog?item.statusLog>=1?'同意':item.statusLog==0?'':'驳回':''}} </span></h3>
              <p v-if="item.stepTypeLog!=0&&item.stepTypeLog!=null" style="padding-top: 20px;">审批意见：{{ item.remark }}</p>
            </el-card>
            </el-timeline-item>
        </el-timeline>
      </el-tab-pane>
      <el-tab-pane  :key="3" label="进行审批" v-if="optType!='view'">
        <el-form ref="approveForm" :model="approveForm" :rules="approveRules" label-width="150px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="审批意见" prop="remark">
                <el-input type="textarea" placeholder="请输入审批意见" v-model="approveForm.remark"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item>
                <el-button type="primary" @click="submitForm(true)">同 意</el-button>
                <el-button type="danger" @click="submitForm(false)">驳 回</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <div slot="footer" class="dialog-footer" style="text-align:center;margin-top: 20px;">
      <el-button type="info" @click="cancel">关 闭</el-button>
    </div>
  </div>
  </el-dialog>
</template>

<script>
import {getOrder, approveFlow, approve, listLine} from "@/api/mes/pro/outsourcingorder";
import Planselector from "@/views/mes/pro/outsourcingplan/planselector.vue";
import PlanLine from "@/views/mes/pro/outsourcingplan/planline.vue";
import SelectManufacture from "@/views/mes/md/outsourcedmanufacture/selectManufacture.vue";
import OrderLine from "@/views/mes/pro/outsourcingorder/orderLine.vue";
import {getPlan} from "@/api/mes/pro/outsourcingplan";


export default {
  name: "approveView",
  components: {OrderLine, SelectManufacture, PlanLine, Planselector},
  dicts: ['erp_payment_type'],
  data() {
    return {
      activeTab:'订单信息',
      planLineOptType:'view',
      planLineList:[],
      fileType: ["pdf"],
      // 图纸列表
      pictureList: [],
      optType:'view',
      open:false,
      title:null,
      approveFlow:[{}],
      // 遮罩层
      loading: true,
      orderLine:[],
      // 选中数组
      ids: [],
      // 添加的商品信息表格数据
      addGoodsList: [],
      // 表单参数
      form: {},
      approveForm:{},
      // 表单校验
      rules: {
      },
      approveRules: {
        remark: [
          { required: true, message: "请输入审批意见", trigger: "blur" },
          { min: 1, max: 200, message: "长度在 1 到 200 个字符", trigger: "blur" }
        ]
      }
    };
  },
  created() {
   /* this.getList();
    //查询商品表方法
    this.getGoodsList();
    //查询供应商列表方法
    this.getSupplierlist();*/
  },
  methods: {
    // 获取文件名称
    getFileName(name) {
      if (name&&name.lastIndexOf("/") > -1) {
        return name.slice(name.lastIndexOf("/") + 1);
      } else {
        return "";
      }
    },
    init(id){
      this.activeTab='订单信息'
      this.approveForm={remark:''};
      getOrder(id).then(response => {
        this.form = response.data;
        this.open = true;
        if(this.form.drawUrl) {
          this.pictureList.push(this.form.drawUrl);
        }
        approveFlow(this.form.orderCode).then(re => {
          this.approveFlow = re.data;
        })
        listLine({orderCode:this.form.orderCode}).then(re=>{
            let l = re.rows.map(item => {
              item.updateStatus = false;
              return item;
            })
            this.orderLine = l;
        })
        getPlan(this.form.planId).then(re=>{
          this.planLineList=re.data.lineList;
        })
      });
    },

    // 取消按钮
    cancel() {
      this.open = false;
    },
    /** 新增提交按钮 */
    submitForm(isYes) {
      let that = this;
      let words=isYes?'通过':'驳回';
      this.$refs["approveForm"].validate(valid => {
        if (valid) {
          that.$modal.confirm(`是否确认审批${words}？`).then(function () {
            approve({
              'businessId': that.form.orderId,
              'remark': that.approveForm.remark,
              'isYes': isYes
            }).then(response => {
              that.$modal.msgSuccess("操作成功");
              that.open = false;
              that.$parent.getList();
              that.cancel();
            })
          });
        }
      });
    },
  }
};
</script>

<style >
#approveTimeLine .el-timeline-item__node--normal{
  width: 18px;
  height: 18px;
  left: -4px;
}
</style>
